<script setup lang="ts">
import { RouterLink,RouterView } from "vue-router";
import moment from "moment";
import { ref, onMounted } from "vue";
import Layout from "./views/layout/index.vue"

let nowTime = ref("1999-12-31 00:00");
let timer = ref<null | number>(null);
const viewportRef = ref<any>(null)

const autoRealTime = () => {
  timer.value = setInterval(() => {
    nowTime.value = moment().format("YYYY-MM-DD HH:mm");
  }, 2000);
};

// 设计稿宽高
const designDraftWidth:number = 1920
const designDraftHeight:number = 920

// 获取视口宽高比,并且按比率缩放视口
const handleScreenAuto = () =>{
  const documentDom = document.documentElement
  const scale = documentDom.clientWidth/documentDom.clientHeight < designDraftWidth/designDraftHeight?documentDom.clientWidth/designDraftWidth:documentDom.clientHeight/designDraftHeight
  document.querySelector('#viewport-box').style.transform = `scale(${scale}) translate(-50%)`
}
onMounted(() => {
  autoRealTime();
  handleScreenAuto()
  window.onresize = () => handleScreenAuto()
});


</script>
<template>
  <div class="viewport-box" >
    <div id="viewport-box">
      <div class="header-wrap">
        <div class="header-left">
          <img src="../src/assets/imgs/logo.png" alt="logo" />
          <div class="header-title">
            <p>建筑能效综合指标</p>
          </div>
        </div>
        <div class="header-right">
          <div class="header-center-title">
            <nav>
              <span><Router-link  to="/home">首页</Router-link></span>
              <span><Router-link  to="/about">关于</Router-link></span>
              <span><Router-link  to="/signature">手写板</Router-link></span>
<!--              <span><Router-link >菜单四</Router-link></span>-->
            </nav>
          </div>
          <div class="header-other-info">
            <p>
              <span>温度 <i>21℃</i></span>
              <span>湿度 <i>50%</i></span>
              <span>{{ nowTime }}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="viewport-content">
<!--        <RouterView />-->
        <Layout />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.viewport-box {
  width: 100%;
  height: 100%;
  background: url(./assets/imgs/bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
  #viewport-box{
    display: inline-block;
    width: 1920px;
    height: 920px;
    position: absolute;
    left: 50%;
    transform-origin: 0 0;
    .header-wrap {
      width: calc(100% - 40px);
      height: 60px;
      padding: 10px 20px;
      display: flex;
      .header-left {
        flex: 1;
        text-align: left;
        display: flex;
        img {
          height: 46px;
          width: 46px;
        }
        .header-title {
          display: inline-block;
          margin-left: 20px;
          p {
            font-size: 26px;
            font-style: italic;
            color: white;
            letter-spacing: 2px;
            margin: 0;
            padding-bottom: 20px;
            background: url(./assets/imgs/subtitle.png) no-repeat;
            background-size: 105%;
            background-position: -15px 24px;
          }
        }
      }
      .header-right {
        background: url(/src/assets/imgs/header-bg.png);
        background-repeat: no-repeat;
        background-size: 80% 70%;
        flex: 2;
        display: flex;
        background-position-x: right;

        div {
          flex: 1;
        }
        .header-center-title {
          font-size: 14px;
          color: white;
          display: table;
          background: url(./assets/imgs/active-top-bar.png) no-repeat;
          background-position: 50% 0;
          background-size: auto 50%;
          nav {
            margin-top: 12px;
            color: #077053;
            font-size: 18px;
            font-weight: 600;
            font-style: italic;
            text-align: right;
          }
            span{
              display: inline-block;
              margin: 0 15px;
              padding-bottom: 5px;
              cursor:pointer;
              transition: all .3s linear;
            }
          span:hover{
            text-shadow: 0px 0px 1px aqua;
            border-bottom: 1px solid rgba(0, 234, 255, 0.63);
            box-shadow: inset 0 -2px 1px rgba(0, 234, 255, 0.63);
          }
            span+span::before{
              content: '|';
              display: inline-block;
              position: relative;
              opacity: .5;
              left: -15px;
              transform: rotate(0.03turn) scale(0.9);
            }

          }
        }
        .header-other-info {
          display: table;
          padding-bottom: 25px;
          p {
            margin-bottom: 0;
            display: table-cell;
            vertical-align: middle;
            text-align: right;
            span {
              padding: 0 30px;
              display: inline-block;
              color: white;
              position: relative;
              i {
                color: #efba18;
              }
            }
            span + span::after {
              content: '';
              width: 0;
              height: 70%;
              display: block;
              position: absolute;
              left: 0;
              top: 15%;
              border-left: 1px solid rgb(205, 191, 191);
            }
          }
        }
      }
    }
    .viewport-content {
      width: 100%;
      height: calc(100% - 60px);
    }
}

</style>
